<template>
<div class="bh-pagination">
	<button type="button" class="btn-prev" :disabled='currentPage == 1'>
		<bh-icon name='arrow-left'></bh-icon>
	</button>
	<ul class="bh-pager">
		<li class="number" :class="{ active: currentPage === pager }" v-for="pager in pagers" :key='pager' @click='onPagerClick(pager)'>{{pager}}</li>
	</ul>
	<button type="button" class="btn-next" :disabled='currentPage == maxPage'>
		<bh-icon name='arrow-right'></bh-icon>
	</button>
</div>
</template>

<script>
export default {
	name: 'bh-pagination',
	props: {
		pageCount: Number,
		total: Number,
		pageSize: {
			type: Number,
			default: 10
		},
		pageSizes: {
			type: Array,
			default() {
				return [10, 20, 30, 40, 50, 100];
			}
		},
	},
	data() {
		return {
			currentPage: this.pageCount,
		}
	},
	methods: {
		onPagerClick(pager) {
			this.currentPage = pager;

			this.$emit('change', pager);
		},
	},
	computed: {
		pagers() {
			const array = [];
			const total = this.maxPage + 1;
			for (let i = 1; i < total; i++) {
				array.push(i);
			}
			return array;
		},
		maxPage() {
			let num1 = this.total % this.pageSize;
			let num2 = parseInt(this.total / this.pageSize);
			if(num1 == 0) {
				return num2;
			}
			return num2 + 1;
		},
	},
}
</script>
